<template>
  <div class="emSignatureDemo">
    <signatureField
      ref="esign"
      :width="width"
      :height="height"
      :isCrop="isCrop"
      :lineWidth="lineWidth"
      :lineColor="lineColor"
      :bgColor.sync="bgColor"
      :readonly="readonly"
      :required="required"
    >
    </signatureField>
    <img :src="this.resultImg" alt="" />

    <button @click="handleReset">清空</button>
    <button @click="handleGenerate">生成图片</button>
    签名颜色:
    <a-select
      :default-value="lineColor"
      style="width: 120px"
      @change="selectBorderChange"
    >
      <a-select-option
        :value="item.value"
        v-for="(item, index) in colorList"
        :key="index"
      >
        {{ item.name }}
      </a-select-option>
    </a-select>
    签名背景颜色:
    <a-select
      :default-value="bgColor"
      style="width: 120px"
      @change="selectBorderChange2"
    >
      <a-select-option
        :value="item.value"
        v-for="(item, index) in colorList"
        :key="index"
      >
        {{ item.name }}
      </a-select-option>
    </a-select>
    面板宽度:
    <a-input placeholder="边框宽度" type="number" v-model="width" />
    面板高度:
    <a-input placeholder="边框高度" type="number" v-model="height" />
    签字字体大小:
    <a-input placeholder="签字字体大小" type="number" v-model="lineWidth" />
    <!-- 是否只读 -->
    是否只读:
    <a-switch default-checked @change="readonlyChange" />
    是否必填:
    <a-switch default-checked @change="requiredChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      lineWidth: 10,
      lineColor: "#000000",
      bgColor: "#61afef",
      resultImg: "",
      isCrop: false,
      height: 300,
      width: 300,
      // 是否只读
      readonly: false,
      required: true,
      colorList: [
        { name: "红色", value: "#e06c75" },
        { name: "蓝色", value: "#21b4e0" },
        { name: "黄色", value: "rgba(209, 154, 102)" },
        { name: "黑色", value: "#000" },
      ],
    };
  },
  methods: {
    selectBorderChange(value) {
      this.lineColor = value;
    },
    selectBorderChange2(value) {
      this.bgColor = value;
    },
    handleReset() {
      // 清空
      this.$refs.esign.reset();
    },
    handleGenerate() {
      //
      this.$refs.esign
        .generate()
        .then((res) => {
          this.resultImg = res;
        })
        .catch((err) => {
          alert("请签名后再进行提交"); // 画布没有签字时会执行这里 'Not Signned'
        });
    },
    // 是否只读
    readonlyChange(value) {
      this.readonly = value;
    },
    // 是否必填
    requiredChange(value) {
      this.required = value;
    },
  },
};
</script>

<style></style>
